import React from "react";

import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
// import { HashRouter , Route, Link } from "react-router-dom";

let Index = () => <h1>首页</h1>
let News = () => <h1>新闻</h1>
let CNnews = () => <h2>中文新闻</h2>
let ENnews = () => <h2>英文新闻</h2>
let NotFound = () => <h2>404</h2>

class Books extends React.Component {

  handlerClick() {
    console.log(this.props);
    this.props.history.push('/index', [{
      key: "ac3df4"
    }])

  }



  render() {
    return (
      <div>
        <div>图书</div>
        <button onClick={this.handlerClick.bind(this)}>click</button>
      </div>
    )
  }
}


function App() {
  return (
    <div className="App">
      <h1>Router Learn</h1>
      <BrowserRouter>
        <Link to='/home'>首页</Link>
        <Link to='/news'>新闻</Link>
        <Link to='/news/cn'>cn新闻</Link>
        <Link to='/news/en'>en新闻</Link>
        <Link to='/books'>图书</Link>


        <Switch>
          <Route path='/home' component={Index}></Route>
          {/* 加上 exact 精准匹配 */}

          <Route exact path='/news' component={News}></Route>

          {/* 严格模式 */}
          <Route strict exact path='/news/cn' component={CNnews}></Route>
          <Route path='/news/en' component={ENnews}></Route>
          <Route path='/books' component={Books}></Route>
          <Route path='/' component={NotFound}></Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;
